<template>
  <view class="memberDetails" v-if="res && !loading">
    <!-- 基本资料 -->
    <view class="basic-info">
      <view class="user flex flex-ai-c">
        <image class="avatar" :src="res.headportrait"></image>
        <view class="userinfo flex flex-dir-c flex-jc-c">
          <view class="info flex flex-ai-c">
            <text>{{res.nickname}}</text>
            <image v-if="res.isbroker" class="badge" src="https://files.yzsheng.com/client/order/hehuorenicon.png"></image><!-- 是合伙人 -->
            <image v-else class="badge" src="https://files.yzsheng.com/client/me/img/hehuoren2.png"></image><!-- 不是合伙人 -->
            <image v-if="res.iscar" class="badge" src="https://files.yzsheng.com/client/order/chebiao.png"></image><!-- 车主 -->
          </view>
          <!-- <view class="consume-status"><text>{{res.isCostMoney ? '已消费' : '未消费'}}</text></view> -->
        </view>
      </view>
      
      <view class="invite-box flex flex-ai-c">
        <view class="cell">
          <text class="num"><text class="strong">{{res.friendtotal}}</text>人</text>
          <text class="desc">所有好友</text>
        </view>
        <view class="line"></view>
        <view class="cell">
          <text class="num"><text class="strong">{{res.friend}}</text>人</text>
          <text class="desc">今日增加</text>
        </view>
      </view>
    </view>
    
    <!-- 邀请码 -->
    <view class="invite-code-box">
      <image class="bg" src="https://files.yzsheng.com/client/commodity/erweima@2x.png" mode="aspectFill"></image>
      <view class="code-box flex flex-ai-c flex-jc-c" @click="onCopyIniteCode" :data-clipboard-text="res.invitecode">
        <text class="code">{{res.invitecode}}</text>
        <i-icon icon="iconfuzhi" size="50rpx" color="#666"></i-icon>
      </view>
      <view class="qrcode">
        <image class="img" :src="res.app_QR_code"></image>
      </view>
    </view>
    
    <!-- 分享按钮 -->
    <view class="share-box">
      <view class="cell" @click="onShare('WXSceneSession')">
        <i-icon icon="iconweixin" color="#46BB36" size="70rpx"></i-icon>
        <text class="text">微信</text>
      </view>
      <view class="cell" @click="onShare('WXSenceTimeline')">
        <i-icon icon="iconpengyouquan" type="multiple" size="70rpx"></i-icon>
        <text class="text">朋友圈</text>
      </view>
      <view class="cell" @click="downloadImg">
        <i-icon icon="iconbaocunbendi" color="#47A2FF" size="70rpx"></i-icon>
        <text class="text">本地</text>
      </view>
    </view>
    
    <!-- 移除按钮 -->
    <view class="remove-btn" v-if="type === 'group'" @click="removeMember"><text>移除</text></view>
    
  </view>
  
  <view v-else-if="loading && !res">
    <view class="flex flex-ai-c flex-jc-c mt-30"><u-loading status="loading" /></view>
  </view>
  <u-empty mode="data" v-else></u-empty>
</template>

<script>
const Clipboard = require('@/utils/clipboard.js')
import {share} from '@/utils/common-api.js' // 导入分享方法
export default {
  data() {
    return {
      res: null,
      loading: true,
      type: '',
      id: '',
      sid: ''
    }
  },
  onLoad(option) {
    if(option.from && option.from === 'chat') {
      uni.setNavigationBarTitle({
        title: ' '
      })
    }
    this.type = option.type || ''
    this.id = option.id || ''
    this.sid = option.sid || ''
    if(option.id) {
      this.getMemberInfo(option.id)
    } else if(option.sid) {
      this.getMemberInfo(option.sid)
    }
    
    // #ifdef H5
    this.$nextTick(() =>{
      const btnCopy = new Clipboard('.code-box')
      btnCopy.on('success', e => {
        uni.showToast({
          icon: 'none',
          title: '复制成功'
        })
      })
    })
    // #endif
  },
  methods: {
    async getMemberInfo(id) {
      try{
        let res = await this.$api.user.GetMemberInfomation({
          accountid: id
        })
        this.res = res.data
        this.loading = false
      }catch(e){
        this.loading = false
      }
    },
    // 复制邀请码
    onCopyIniteCode() {
      // #ifndef H5
      uni.setClipboardData({
        data: this.res.invitecode,
        success() {
          uni.showToast({
            icon: 'none',
            title: '复制成功'
          })
        }
      })
      // #endif
    },
    // 保存到本地
    downloadImg() {
      uni.getImageInfo({  
        src: this.res.app_QR_code,  
        success: function(image) {
          uni.saveImageToPhotosAlbum({  
            filePath: image.path,  
            success: function() {
              uni.showToast({  
                icon: 'none',
                title: '保存成功', 
              })
            }
          })
        }  
      })
    },
    onShare(data) {
      share({
        scene: data,
        type: 2,
        imageUrl: this.res.app_QR_code
      }, () => {
        
      })
    },
    // 移除成员
    async removeMember() {
      uni.showLoading({
        mask: true,
        title: '加载中'
      })
      try{
        let res = await this.$api.user.DeleteMember({
          id: this.id,
          sid: this.sid
        })
        if(res.code === 200) {
          this.type = ''
        }
        uni.hideLoading()
        uni.showToast({
          icon: 'none',
          title: res.msg
        })
      }catch(e){
        uni.hideLoading()
        uni.showToast({
          icon: 'none',
          title: '移除失败'
        })
      }
    }
  }
}
</script>

<style lang="scss">
page{
  background-color: #f6f6f6;
}
.memberDetails{
  overflow: hidden;
  .basic-info{
    margin: 20rpx 24rpx;
    background-color: #fff;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;
    padding: 0 26rpx;
    .user{
      padding: 24rpx 0;
      border-bottom: 2rpx solid #eee;
      .avatar{
        width: 96rpx;
        height: 96rpx;
        border-radius: 96rpx;
      }
      .userinfo{
        flex: 1;
        margin-left: 30rpx;
        .info{
          font-size: 32rpx;
          color: #333;
          .badge{
            height: 38rpx;
            width: 38rpx;
            margin-left: 15rpx;
          }
        }
        .consume-status{
          width: 90rpx;
          height: 34rpx;
          border: 2rpx solid #50B300;
          border-radius: 17rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22rpx;
          color: #55B507;
          margin-top: 8rpx;
        }
      }
    }
    .invite-box{
      padding: 30rpx 0 40rpx;
      .cell{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .num{
          font-size: 28rpx;
          color: #666;
          .strong{
            font-size: 60rpx;
            color: #FBB000;
            font-weight: bold;
          }
        }
        .desc{
          color: #666;
          font-size: 26rpx;
        }
      }
      .line{
        width: 2rpx;
        height: 90rpx;
        background-color: #eee;
      }
    }
  }
  
  .invite-code-box{
    width: 552rpx;
    height: 658rpx;
    position: relative;
    overflow: hidden;
    margin: 40rpx auto;
    .bg{
      width: 100%;
      height: 100%;
    }
    .code-box{
      height: 156rpx;
      width: 100%;
      position: absolute;
      left: 0;
      top: 10rpx;
      .code{
        font-size: 56rpx;
        color: #FF7420;
        font-weight: bold;
        margin-right: 20rpx;
      }
    }
    .qrcode{
      width: 404rpx;
      height: 404rpx;
      background-color: #E0E0E0;
      border-radius: 5rpx;
      position: absolute;
      left: 74rpx;
      bottom: 46rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .img{
        display: block;
        width: 362rpx;
        height: 362rpx;
      }
    }
  }
  .share-box{
    width: 552rpx;
    margin: 0 auto;
    display: flex;
    .cell{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .text{
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #333;
      }
    }
  }
  
  .remove-btn{
    margin: 100rpx 24rpx;
    height: 88rpx;
    background: linear-gradient(0deg, #FBD220, #FFE23E);
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: #333;
  }
}
</style>
